<!DOCTYPE html>
<!-- saved from url=(0064)http://www.17sucai.com/preview/680229/2016-12-08/4183/index.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>css3属性结合</title>
    <style type="text/css" media="screen">
        body {
            background-color: white;
            color: white;
            font-family: 'Lucida Grande', Verdana, Arial;
            font-size: 12px;
            background-image: -webkit-gradient(radial,
            50% 500, 1,
            50% 500, 400,
            from(rgba(255, 255, 255, 0.3)),
            to(rgba(255, 255, 255, 0)));
            background-repeat: no-repeat;
        }

        #container {
            margin-top: 20%;
            width: 100%;
            height: 700px;
            perspective:800px;
            -o-perspective:800px;
            -moz-perspective:800px;
            -webkit-perspective: 800px;
            perspective-origin:50% 225px;
            -webkit-perspective-origin: 50% 225px;
            -o-perspective-origin:50% 225px;
            -moz-perspective-origin:50% 225px;

        }
        #stage {
            width: 100%;
            height: 100%;
            transition: -webkit-transform 2s;
            -webkit-transition: -webkit-transform 2s;
            -o-transition: -webkit-transform 2s;
            -moz-transition: -webkit-transform 2s;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
        }

        #shape {
            position: relative;
            top: 160px;
            margin: 0 auto;
            height: 200px;
            width: 200px;
            -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
            -o-transform: translateZ(0px);
            -moz-transition: translateZ(0px);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
        }

        .plane {
            position: absolute;
            height: 200px;
            width: 200px;
            border: 1px solid black;
            -webkit-border-radius: 12px;
            -webkit-box-sizing: border-box;
            text-align: center;
            font-family: Times, serif;
            font-size: 124pt;
            color: black;
            background-color: rgba(255, 255, 255, 0.6);
            -webkit-transition: -webkit-transform 2s, opacity 2s;
            transition: -webkit-transform 2s, opacity 2s;
            -o-transition: -o-transform 2s, opacity 2s;
            -moz-transition: -moz-transform 2s, opacity 2s;
            -webkit-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
            cursor:pointer;
        }


        #shape.backfaces .plane {
            -webkit-backface-visibility: visible;
            -o-backface-visibility: visible;
            -moz-backface-visibility: visible;
            backface-visibility: visible;
        }

        #shape {
            /*点击键盘时间的transition*/
            -webkit-transition: -webkit-transform 1s;
            transition: transform 1s;
            -o-transition: -o-transform 1s;
            -moz-transition: -moz-transform 1s;


        }

        .shapeAim{
            -webkit-animation: spin 8s infinite linear;
            -o-animation: spin 8s infinite linear;
            -moz-animation: spin 8s infinite linear;
            animation: spin 8s infinite linear;
        }

        @-webkit-keyframes spin {
            from { -webkit-transform: rotateY(0deg); }
            to   { -webkit-transform: rotateY(-360deg); }
        }
        @-moz-keyframes spin {
            from { -moz-transform: rotateY(0deg); }
            to   { -moz-transform: rotateY(-360deg); }
        }
        @-o-keyframes spin {
            from { -o-transform: rotateY(0deg); }
            to   { -o-transform: rotateY(-360deg); }
        }
        @keyframes spin {
            from { transform: rotateY(0deg); }
            to   { transform: rotateY(-360deg); }
        }

        /* ---------- cube 样式------------- */
        
        .cube > .two {
            opacity: 0.5;
            -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
            -o-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
            -moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
            transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
        }
        .cube > .one{
            opacity:.5;
            -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
            -o-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
            -moz-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
            transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
        }
        .cube > .five{
            opacity:.5;
            -webkit-transform: scale3d(1.2,1.2,1.2) rotateY(90deg) translateZ(100px);
            -o-transform: scale3d(1.2,1.2,1.2) rotateY(90deg) translateZ(100px);
            -moz-transform: scale3d(1.2,1.2,1.2) rotateY(90deg) translateZ(100px);
            transform: scale3d(1.2,1.2,1.2) rotateY(90deg) translateZ(100px);
        }
        .cube > .three{
            opacity:.5;
            -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-180deg) translateZ(100px) rotateZ(180deg);
            -o-transform: scale3d(1.2, 1.2, 1.2) rotateY(-180deg) translateZ(100px) rotateZ(180deg);
            -moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(-180deg) translateZ(100px) rotateZ(180deg);
            transform: scale3d(1.2, 1.2, 1.2) rotateY(-180deg) translateZ(100px) rotateZ(180deg);
        }
        .cube > .four{
            opacity:.5;
            -webkit-transform: scale3d(1.2,1.2,1.2) rotateX(-90deg) translateZ(100px);
            -o-transform: scale3d(1.2,1.2,1.2) rotateX(-90deg) translateZ(100px);
            -moz-transform: scale3d(1.2,1.2,1.2) rotateX(-90deg) translateZ(100px);
            transform: scale3d(1.2,1.2,1.2) rotateX(-90deg) translateZ(100px);
        }
        .cube > .six{
            opacity:.5;
            -webkit-transform: scale3d(1.2,1.2,1.2) rotateY(-90deg) translateZ(100px);
            -o-transform: scale3d(1.2,1.2,1.2) rotateY(-90deg) translateZ(100px);
            -moz-transform: scale3d(1.2,1.2,1.2) rotateY(-90deg) translateZ(100px);
            transform: scale3d(1.2,1.2,1.2) rotateY(-90deg) translateZ(100px);
        }


        .cube > .eight {
            -webkit-transform: scale3d(0.8,0.8,0.8) rotateX(90deg) translateZ(100px);
            -o-transform: scale3d(0.8,0.8,0.8) rotateX(90deg) translateZ(100px);
            -moz-transform: scale3d(0.8,0.8,0.8) rotateX(90deg) translateZ(100px);

            transform: scale3d(0.8,0.8,0.8) rotateX(90deg) translateZ(100px);
        }

        .cube > .seven {
            -webkit-transform: scale3d(0.8,0.8,0.8) translateZ(100px);
            -o-transform: scale3d(0.8,0.8,0.8) translateZ(100px);
            -moz-transform: scale3d(0.8,0.8,0.8) translateZ(100px);
            transform: scale3d(0.8,0.8,0.8) translateZ(100px);
        }

        .cube > .eleven {
            -webkit-transform: scale3d(0.8,0.8,0.8) rotateY(90deg) translateZ(100px);
            -o-transform: scale3d(0.8,0.8,0.8) rotateY(90deg) translateZ(100px);
            -moz-transform: scale3d(0.8,0.8,0.8) rotateY(90deg) translateZ(100px);
            transform: scale3d(0.8,0.8,0.8) rotateY(90deg) translateZ(100px);
        }

        .cube > .nine {
            -webkit-transform: scale3d(0.8,0.8,0.8) rotateY(-180deg) translateZ(100px) rotateZ(180deg);
            -o-transform: scale3d(0.8,0.8,0.8) rotateY(-180deg) translateZ(100px) rotateZ(180deg);
            -moz-transform: scale3d(0.8,0.8,0.8) rotateY(-180deg) translateZ(100px) rotateZ(180deg);
            transform: scale3d(0.8,0.8,0.8) rotateY(-180deg) translateZ(100px) rotateZ(180deg);
        }

        .cube > .ten {
            -webkit-transform: scale3d(0.8,0.8,0.8) rotateX(-90deg) translateZ(100px);
            -o-transform: scale3d(0.8,0.8,0.8) rotateX(-90deg) translateZ(100px);
            -moz-transform: scale3d(0.8,0.8,0.8) rotateX(-90deg) translateZ(100px);
            transform: scale3d(0.8,0.8,0.8) rotateX(-90deg) translateZ(100px);
        }

        .cube > .twelve {
            -webkit-transform: scale3d(0.8,0.8,0.8) rotateY(-90deg) translateZ(100px);
            -o-transform: scale3d(0.8,0.8,0.8) rotateY(-90deg) translateZ(100px);
            -moz-transform: scale3d(0.8,0.8,0.8) rotateY(-90deg) translateZ(100px);
            transform: scale3d(0.8,0.8,0.8) rotateY(-90deg) translateZ(100px);
        }

        /* ---------- ring 样式 ------------- */

        .ring > .one {
            -webkit-transform: translateZ(380px);
            -o-transform: translateZ(380px);
            -moz-transform: translateZ(380px);
            transform: translateZ(380px);
        }

        .ring > .two {
            -webkit-transform: rotateY(30deg) translateZ(380px);
            -o-transform: rotateY(30deg) translateZ(380px);
            -moz-transform: rotateY(30deg) translateZ(380px);
            transform: rotateY(30deg) translateZ(380px);
        }

        .ring > .three {
            -webkit-transform: rotateY(60deg) translateZ(380px);
            -o-transform: rotateY(60deg) translateZ(380px);
            -moz-transform: rotateY(60deg) translateZ(380px);
            transform: rotateY(60deg) translateZ(380px);
        }

        .ring > .four {
            -webkit-transform: rotateY(90deg) translateZ(380px);
            -o-transform: rotateY(90deg) translateZ(380px);
            -moz-transform: rotateY(90deg) translateZ(380px);
            transform: rotateY(90deg) translateZ(380px);
        }

        .ring > .five {
            -webkit-transform: rotateY(120deg) translateZ(380px);
            -o-transform: rotateY(120deg) translateZ(380px);
            -moz-transform: rotateY(120deg) translateZ(380px);
            transform: rotateY(120deg) translateZ(380px);
        }

        .ring > .six {
            -webkit-transform: rotateY(150deg) translateZ(380px);
            -o-transform: rotateY(150deg) translateZ(380px);
            -moz-transform: rotateY(150deg) translateZ(380px);
            transform: rotateY(150deg) translateZ(380px);
        }

        .ring > .seven {
            -webkit-transform: rotateY(180deg) translateZ(380px);
            -o-transform: rotateY(180deg) translateZ(380px);
            -moz-transform: rotateY(180deg) translateZ(380px);
            transform: rotateY(180deg) translateZ(380px);
        }

        .ring > .eight {
            -webkit-transform: rotateY(210deg) translateZ(380px);
            -o-transform: rotateY(210deg) translateZ(380px);
            -moz-transform: rotateY(210deg) translateZ(380px);
            transform: rotateY(210deg) translateZ(380px);
        }

        .ring > .nine {
            -webkit-transform: rotateY(-120deg) translateZ(380px);
            -o-transform: rotateY(-120deg) translateZ(380px);
            -moz-transform: rotateY(-120deg) translateZ(380px);
            transform: rotateY(-120deg) translateZ(380px);
        }

        .ring > .ten {
            -webkit-transform: rotateY(-90deg) translateZ(380px);
            -o-transform: rotateY(-90deg) translateZ(380px);
            -moz-transform: rotateY(-90deg) translateZ(380px);
            transform: rotateY(-90deg) translateZ(380px);
        }

        .ring > .eleven {
            -webkit-transform: rotateY(300deg) translateZ(380px);
            -o-transform: rotateY(300deg) translateZ(380px);
            -moz-transform: rotateY(300deg) translateZ(380px);
            transform: rotateY(300deg) translateZ(380px);
        }

        .ring > .twelve {
            -webkit-transform: rotateY(330deg) translateZ(380px);
            -o-transform: rotateY(330deg) translateZ(380px);
            -moz-transform: rotateY(330deg) translateZ(380px);
            transform: rotateY(330deg) translateZ(380px);
        }
        .controls > div {
            margin: 10px;
        }
    </style>
    <script type="text/javascript">
        function hasClassName(inElement, inClassName)
        {
            var classStr = inElement.className;
            var classArr = classStr.split(' ');
//            console.log(classArr);
            for(var i=0;i < classArr.length ; i++){
                if(inClassName == classArr[i]){
                    return true;
                }
            }
            return false;
        }

        function addClassName(inElement, inClassName)
        {
            if (!hasClassName(inElement, inClassName))
                inElement.className = [inElement.className, inClassName].join(' ');
        }

        function removeClassName(inElement, inClassName)
        {
            if (hasClassName(inElement, inClassName)) {
                var j = 0;
                var newClassArr =[];
                var classArr = inElement.className.split(' ');
                for(var i = 0;i<classArr.length;i++){
                    if(classArr[i]==inClassName) {
                        continue;
                    }
                    newClassArr[j] = classArr[i];
                    j++
                }

                inElement.className = newClassArr.join(' ');
//                第二种可以removeClass()
//                inElement.className = inElement.className.replace(inElement.className.match(inClassName),'');
            }
        }

        function toggleClassName(inElement, inClassName)
        {
            if (hasClassName(inElement, inClassName))
                removeClassName(inElement, inClassName);
            else
                addClassName(inElement, inClassName);
        }

        function toggleShape()
        {
            var shape = document.getElementById('shape');
            if (hasClassName(shape, 'ring')) {
                removeClassName(shape, 'ring');
                addClassName(shape, 'cube');
            } else {
                removeClassName(shape, 'cube');
                addClassName(shape, 'ring');
            }

            //转换样式translateZ（）导致的感觉太近
            var stage = document.getElementById('stage');
            if (hasClassName(shape, 'ring'))
                stage.style.webkitTransform = 'translateZ(-200px)';
	          

            else
                stage.style.webkitTransform = '';
	   
        }

        function toggleBackfaces() {
            var backfacesVisible = document.getElementById('backfaces').checked;
            var shape = document.getElementById('shape');
            if (backfacesVisible)
                addClassName(shape, 'backfaces');
            else
                removeClassName(shape, 'backfaces');
        }



        function Html5Audio(url,loop){
        	var audio = new Audio(url);
        	audio.loop = loop;
        	audio.autoplay = true;
        	audio.play();
        }

        Html5Audio('http://demo.daimabiji.com/558/Music/Fade.mp3',true);
        window.onload = function () {
            setTimeout(function () {
                toggleShape();
            },1000)
        };
    </script>
</head>
<body onclick="toggleShape()">

<!--<div class="controls">-->
    <!--<h1>动画和过渡还有转换的结合</h1>-->
    <!--<p>这个是结合了css3几个比较吊的属性来完成的3d效果，这个可以有很多拓展，做3d的图片画廊，和什么3d的表啥的</p>-->
    <!--<p>点击切换样式能够让正方体的3d样式变成一个类似12变形的环</p>-->
    <!--<p>选中backface可见会让被你正面挡住的面显示出来</p>-->
    <!--<div><button onclick="toggleShape()">切换样式</button></div>-->
    <!--<div><input type="checkbox" id="backfaces" onclick="toggleBackfaces()" checked=""><label for="backfaces">backface是否可见</label></div>-->
<!--</div>-->

<div id="container">
    <div id="stage">
        <div id="shape" class="cube backfaces shapeAim">
            <div class="plane one">你</div>
            <div class="plane two">好</div>
            <div class="plane three">感</div>
            <div class="plane four">谢</div>
            <div class="plane five">您</div>
            <div class="plane six">的</div>
            <div class="plane seven">陪</div>
            <div class="plane eight">伴</div>
            <div class="plane nine">就</div>
            <div class="plane ten">这</div>
            <div class="plane eleven">样</div>
            <div class="plane twelve">把</div>
        </div>
    </div>
</div>



</body></html>